<template>
  <div>
    <mt-swipe :auto="3000">
      <mt-swipe-item v-for="item in swipeList" :key="item.data.content.data.id" v-if="item.data.content!=null">
        <div @click="showModel(item.data.content.data.playUrl)" v-if="item.data.content!=null">
          <h2 class="swipe-title">{{item.data.content.data.description}}</h2>
          <!-- <img :src="item.data.content.data.cover.detail" alt=""> -->
          <img v-lazy="item.data.content.data.cover.detail" alt="">
        </div>
        <!-- <div v-else>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549350860&di=891a4edb7a00ac6c046ea5dbc01e33e4&imgtype=jpg&er=1&src=http%3A%2F%2Fi-4.shouji56.com%2F2018%2F4%2F1%2F1e2ba640-87dd-4301-a03c-e3645eb8580d.jpg"
            alt="">
        </div> -->
      </mt-swipe-item>
    </mt-swipe>
    <div class="by-btn container-fluid">
      <div class="row">
        <div class="col-xs-4">
          <RouterLink to="/home/newsList" class="item" tag="div">
            <div class="circle Yellow">
              <i class="fa fa-newspaper-o fa-2x"></i>
            </div>
            <p>新闻热点</p>
          </RouterLink>
        </div>
        <div class="col-xs-4">
          <div class="item">
            <div class="circle Blue">
              <i class="fa fa-file-picture-o fa-2x"></i>
            </div>
            <p>图片分享</p>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="item">
            <div class="circle Red">
              <i class="fa fa-shopping-bag fa-2x"></i>
            </div>
            <p>商品购买</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-4">
          <RouterLink to="/home/newsList" class="item" tag="div">
            <div class="circle Purple">
              <i class="fa fa-comments-o fa-2x"></i>
            </div>
            <p>不!要!点!</p>
          </RouterLink>
        </div>
        <div class="col-xs-4">
          <div class="item">
            <div class="circle Orange">
              <i class="fa fa-youtube-play fa-2x"></i>
            </div>
            <p>视频专区</p>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="item">
            <div class="circle Green">
              <i class="fa fa-volume-control-phone fa-2x"></i>
            </div>
            <p>联系我们</p>
          </div>
        </div>
      </div>
    </div>
    
    <mt-popup v-model="popupVisible" position="bottom" :class="{closeLight:popupVisible}">
      <div><span class="close rounded black" @click="popupVisible = false"></span></div>
      <video :src="popupVisible?playUrl:''" width="100%" controls="controls" autoplay="autoplay" style="padding: 20px 0;">您的浏览器不支持 video 标签。</video>
    </mt-popup>
  </div>
</template>

<script>
  import {
    Indicator
  } from 'mint-ui';

  export default {
    name: "",
    data() {
      return {
        popupVisible: false,
        swipeList: [],
        playUrl:''
      }
    },
    methods: {
      loadSwipe() {
        Indicator.open({
          spinnerType: 'double-bounce'
        });
        this.$http.get('https://api.apiopen.top/todayVideo').then((response) => {
          this.swipeList = response.data.result
          // console.log(response.data.result)
          Indicator.close();
        }).catch((err) => {
          console.log(err)
          Indicator.close();
        })
      },
      showModel(url){
        this.playUrl = url;
        this.popupVisible = true;
      },
    },
    mounted() {
      this.loadSwipe()
    }
  }
</script>

<style lang="less" scoped>
  @import '../assets/css/style.less';

  .mint-swipe {
    height: 220px;
    
    img {
      width: 100%;
    }

    h2.swipe-title {
      position: absolute;
      color: #fff;
      // font-weight: bold;
      font-size: 16px;
      bottom: 0px;
      padding: 5px;
      background: rgba(0, 0, 0, .24);
      z-index: 2;
    }
  }

  .by-btn {
    margin-top: 20px;

    .item {
      text-align: center;
      margin-bottom: 20px;

      p {
        margin: 10px 0 0;
        font-size: 15px;
      }

      .circle {
        &.Yellow {
          background-image: linear-gradient(135deg, #FDEB71 10%, #F8D800 100%);
        }

        &.Blue {
          background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
        }

        &.Red {
          background-image: linear-gradient(135deg, #FEB692 10%, #EA5455 100%);
        }

        &.Purple {
          background-image: linear-gradient(135deg, #CE9FFC 10%, #7367F0 100%);
        }

        &.Orange {
          background-image: linear-gradient(135deg, #FCCF31 10%, #F55555 100%);
        }

        &.Green {
          background-image: linear-gradient(135deg, #90F7EC 10%, #32CCBC 100%);
        }

        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin: 0 auto;
        height: 70px;
        width: 70px;
        border-radius: 50%;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.04),
        0px 6px 18px 0px rgba(0, 0, 0, 0.02);

        i {
          text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.04);
        }
      }
    }
  }
</style>
